<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>客户端 - 案例详情</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body {
            max-width: 414px;
            margin: 0 auto;
            background: #f5f5f5;
        }
        /* 主色调蓝紫色 */
        .primary-color {
            color: #6366f1; /* indigo-500 */
        }
        .primary-bg {
            background: #6366f1;
        }
        .primary-text {
            color: #6366f1;
        }
        .primary-bg-light {
            background: #eef2ff; /* indigo-50 */
        }
        /* 案例封面图片 */
        .case-cover {
            width: 100%;
            height: 250px;
            object-fit: cover;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }
        /* 底部导航栏高度和点击区域 */
        .bottom-nav {
            height: 64px;
        }
        .bottom-nav-item {
            padding: 8px 12px;
            min-height: 44px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s ease;
            -webkit-tap-highlight-color: transparent;
        }
        .bottom-nav-item:active {
            opacity: 0.7;
        }
        /* 安全区域适配（iPhone X等） */
        @supports (padding-bottom: env(safe-area-inset-bottom)) {
            .bottom-nav-wrapper {
                padding-bottom: env(safe-area-inset-bottom);
            }
        }
        /* 联系按钮样式 */
        .contact-button {
            background: #6366f1;
            color: white;
            border: none;
            border-radius: 12px;
            padding: 16px;
            width: 100%;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
            box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
        }
        .contact-button:active {
            background: #4f46e5;
            transform: scale(0.98);
        }
        /* 文章内容样式 */
        .article-content {
            line-height: 1.8;
            color: #374151;
        }
        .article-content p {
            margin-bottom: 16px;
        }
        .article-content h3 {
            font-size: 18px;
            font-weight: 700;
            color: #111827;
            margin-top: 24px;
            margin-bottom: 12px;
        }
        .article-content ul {
            margin-left: 20px;
            margin-bottom: 16px;
        }
        .article-content li {
            margin-bottom: 8px;
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- 导航栏 -->
    <nav class="bg-white shadow-sm px-4 py-3 flex items-center justify-between sticky top-0 z-40">
        <i class="fas fa-arrow-left text-gray-600 text-xl cursor-pointer" onclick="window.history.back()"></i>
        <div class="text-lg font-semibold text-gray-800">案例详情</div>
        <i class="fas fa-share-alt text-gray-600 text-xl cursor-pointer" onclick="alert('分享功能')"></i>
    </nav>

    <div class="pb-32">
        <!-- 案例封面图片 -->
        <div class="case-cover" id="caseCoverImage"></div>

        <!-- 案例基本信息 -->
        <div class="bg-white rounded-lg mx-4 mt-4 p-4 shadow-sm">
            <div class="flex items-center justify-between mb-3">
                <h1 class="text-xl font-bold text-gray-800" id="caseTitle">智能流程自动化解决方案</h1>
            </div>
            <div class="flex items-center space-x-2 mb-3">
                <span class="text-2xl font-bold primary-text" id="casePrice">¥28,800</span>
            </div>
            <div class="flex items-center flex-wrap gap-2 mb-3">
                <span class="bg-indigo-50 text-indigo-600 text-xs px-3 py-1 rounded-full" id="caseType">RPA自动化</span>
                <span class="bg-gray-100 text-gray-600 text-xs px-3 py-1 rounded-full" id="caseDuration">2周交付</span>
            </div>
            <p class="text-sm text-gray-600 leading-relaxed" id="caseSummary">
                智能流程自动化解决方案，提升业务处理效率，减少人工操作，实现业务流程的智能化升级。
            </p>
        </div>

        <!-- 案例详细内容 -->
        <div class="bg-white rounded-lg mx-4 mt-4 p-4 shadow-sm">
            <h2 class="text-lg font-bold text-gray-800 mb-4">案例详情</h2>
            <div class="article-content text-sm" id="caseContent">
                <p>
                    本项目为某大型制造企业提供智能流程自动化解决方案，通过RPA技术实现业务流程的自动化处理，大幅提升了业务处理效率和准确性。
                </p>
                <h3>项目背景</h3>
                <p>
                    客户在日常业务处理中面临大量重复性工作，包括数据录入、报表生成、订单处理等。这些工作不仅耗时耗力，还容易出现人为错误，影响了整体业务效率。
                </p>
                <h3>解决方案</h3>
                <ul>
                    <li>部署RPA机器人，自动化处理日常业务流程</li>
                    <li>集成现有业务系统，实现数据无缝对接</li>
                    <li>建立监控和异常处理机制，确保系统稳定运行</li>
                    <li>提供培训和文档支持，帮助客户快速上手</li>
                </ul>
                <h3>实施效果</h3>
                <p>
                    项目实施后，客户业务处理效率提升了80%，错误率降低了95%，释放了大量人力资源，使员工能够专注于更有价值的工作。同时，系统7x24小时稳定运行，大幅提升了客户满意度。
                </p>
                <h3>技术亮点</h3>
                <ul>
                    <li>采用先进的RPA技术，支持多种业务系统集成</li>
                    <li>智能异常处理机制，自动识别和处理异常情况</li>
                    <li>完善的日志和监控系统，便于问题追踪和优化</li>
                    <li>灵活的配置管理，支持快速调整和扩展</li>
                </ul>
            </div>
        </div>

        <!-- 服务优势 -->
        <div class="bg-white rounded-lg mx-4 mt-4 p-4 shadow-sm">
            <h2 class="text-lg font-bold text-gray-800 mb-4">服务优势</h2>
            <div class="space-y-3">
                <div class="flex items-start space-x-3">
                    <i class="fas fa-check-circle text-indigo-500 mt-1"></i>
                    <div>
                        <div class="text-sm font-medium text-gray-800">专业团队</div>
                        <div class="text-xs text-gray-600 mt-1">拥有丰富的RPA项目实施经验</div>
                    </div>
                </div>
                <div class="flex items-start space-x-3">
                    <i class="fas fa-check-circle text-indigo-500 mt-1"></i>
                    <div>
                        <div class="text-sm font-medium text-gray-800">快速交付</div>
                        <div class="text-xs text-gray-600 mt-1">标准流程，2周内完成部署</div>
                    </div>
                </div>
                <div class="flex items-start space-x-3">
                    <i class="fas fa-check-circle text-indigo-500 mt-1"></i>
                    <div>
                        <div class="text-sm font-medium text-gray-800">持续支持</div>
                        <div class="text-xs text-gray-600 mt-1">提供7x24小时技术支持服务</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 底部联系按钮 -->
    <div class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 p-4 z-50" style="max-width: 414px; margin: 0 auto;">
        <button class="contact-button" onclick="handleContactManager()">
            <i class="fas fa-phone-alt mr-2"></i>
            立即联系客户经理
        </button>
    </div>

    <!-- 底部导航栏（Tab Bar） -->
    <div class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 z-40 bottom-nav-wrapper" style="max-width: 414px; margin: 0 auto; padding-bottom: 80px;">
        <div class="grid grid-cols-4">
            <!-- 首页 -->
            <div class="bottom-nav-item" onclick="window.location.href='customer-home.html'" role="button" tabindex="0" aria-label="首页" onkeypress="if(event.key==='Enter'||event.key===' '){window.location.href='customer-home.html'}">
                <i class="fas fa-home text-gray-400 text-xl" aria-hidden="true"></i>
                <div class="text-gray-400 text-xs mt-1">首页</div>
            </div>
            <!-- 需求 -->
            <div class="bottom-nav-item" onclick="window.location.href='customer-requirement-list.html'" role="button" tabindex="0" aria-label="我的需求列表" onkeypress="if(event.key==='Enter'||event.key===' '){window.location.href='customer-requirement-list.html'}">
                <i class="fas fa-list text-gray-400 text-xl" aria-hidden="true"></i>
                <div class="text-gray-400 text-xs mt-1">需求</div>
            </div>
            <!-- 案例 -->
            <div class="bottom-nav-item" onclick="window.location.href='customer-home.html'" role="button" tabindex="0" aria-label="服务案例" aria-current="page" onkeypress="if(event.key==='Enter'||event.key===' '){window.location.href='customer-home.html'}">
                <i class="fas fa-heart primary-color text-xl" aria-hidden="true"></i>
                <div class="primary-color text-xs mt-1 font-medium">案例</div>
            </div>
            <!-- 我的 -->
            <div class="bottom-nav-item" onclick="window.location.href='customer-profile.html'" role="button" tabindex="0" aria-label="个人中心" onkeypress="if(event.key==='Enter'||event.key===' '){window.location.href='customer-profile.html'}">
                <i class="fas fa-user text-gray-400 text-xl" aria-hidden="true"></i>
                <div class="text-gray-400 text-xs mt-1">我的</div>
            </div>
        </div>
    </div>

    <script>
        // 根据URL参数加载不同的案例数据
        const urlParams = new URLSearchParams(window.location.search);
        const caseId = urlParams.get('id') || '1';

        // 案例数据
        const caseData = {
            '1': {
                title: '智能流程自动化解决方案',
                price: '¥28,800',
                type: 'RPA自动化',
                duration: '2周交付',
                summary: '智能流程自动化解决方案，提升业务处理效率，减少人工操作，实现业务流程的智能化升级。',
                coverImage: 'https://images.unsplash.com/photo-1485827404703-89b55fcc595e?w=800&h=500&fit=crop',
                content: `
                    <p>本项目为某大型制造企业提供智能流程自动化解决方案，通过RPA技术实现业务流程的自动化处理，大幅提升了业务处理效率和准确性。</p>
                    <h3>项目背景</h3>
                    <p>客户在日常业务处理中面临大量重复性工作，包括数据录入、报表生成、订单处理等。这些工作不仅耗时耗力，还容易出现人为错误，影响了整体业务效率。</p>
                    <h3>解决方案</h3>
                    <ul>
                        <li>部署RPA机器人，自动化处理日常业务流程</li>
                        <li>集成现有业务系统，实现数据无缝对接</li>
                        <li>建立监控和异常处理机制，确保系统稳定运行</li>
                        <li>提供培训和文档支持，帮助客户快速上手</li>
                    </ul>
                    <h3>实施效果</h3>
                    <p>项目实施后，客户业务处理效率提升了80%，错误率降低了95%，释放了大量人力资源，使员工能够专注于更有价值的工作。同时，系统7x24小时稳定运行，大幅提升了客户满意度。</p>
                    <h3>技术亮点</h3>
                    <ul>
                        <li>采用先进的RPA技术，支持多种业务系统集成</li>
                        <li>智能异常处理机制，自动识别和处理异常情况</li>
                        <li>完善的日志和监控系统，便于问题追踪和优化</li>
                        <li>灵活的配置管理，支持快速调整和扩展</li>
                    </ul>
                `
            },
            '2': {
                title: '数字化转型咨询服务',
                price: '¥35,000',
                type: '管理咨询',
                duration: '1个月',
                summary: '数字化转型咨询服务，优化供应链管理，提升企业运营效率，实现业务创新和增长。',
                coverImage: 'https://images.unsplash.com/photo-1552664730-d307ca884978?w=800&h=500&fit=crop',
                content: `
                    <p>本项目为某中型企业提供数字化转型咨询服务，通过深入分析企业现状，制定全面的数字化转型战略和实施路径。</p>
                    <h3>项目背景</h3>
                    <p>客户在数字化转型过程中面临战略不清晰、技术选型困难、组织变革阻力大等问题，需要专业的咨询服务来指导转型过程。</p>
                    <h3>解决方案</h3>
                    <ul>
                        <li>全面诊断企业数字化现状和痛点</li>
                        <li>制定符合企业特点的数字化转型战略</li>
                        <li>设计详细的实施路径和里程碑</li>
                        <li>提供组织变革和人才培养建议</li>
                    </ul>
                    <h3>实施效果</h3>
                    <p>通过咨询服务，客户明确了数字化转型方向，制定了清晰的实施计划，供应链管理效率提升了60%，客户满意度显著提升。</p>
                `
            },
            '3': {
                title: '定制化企业服务解决方案',
                price: '¥22,000',
                type: '企业服务',
                duration: '3周交付',
                summary: '定制化企业服务解决方案，提升客户满意度，优化服务流程，实现服务标准化和智能化。',
                coverImage: 'https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=800&h=500&fit=crop',
                content: `
                    <p>本项目为某服务型企业提供定制化企业服务解决方案，通过优化服务流程和引入智能化工具，大幅提升了服务质量和客户满意度。</p>
                    <h3>项目背景</h3>
                    <p>客户在服务过程中面临流程不规范、响应速度慢、客户满意度不高等问题，需要优化服务流程和提升服务质量。</p>
                    <h3>解决方案</h3>
                    <ul>
                        <li>梳理和优化现有服务流程</li>
                        <li>建立标准化服务体系和规范</li>
                        <li>引入智能化客服系统</li>
                        <li>提供员工培训和能力提升支持</li>
                    </ul>
                    <h3>实施效果</h3>
                    <p>项目实施后，服务响应时间缩短了70%，客户满意度提升了85%，服务流程更加规范高效。</p>
                `
            },
            '4': {
                title: 'AI智能+RPA自动化综合解决方案',
                price: '¥45,000',
                type: 'AI+RPA',
                duration: '2个月',
                summary: 'AI智能+RPA自动化综合解决方案，结合人工智能和流程自动化技术，实现业务智能化升级。',
                coverImage: 'https://images.unsplash.com/photo-1677442136019-21780ecad995?w=800&h=500&fit=crop',
                content: `
                    <p>本项目为某大型企业提供AI智能+RPA自动化综合解决方案，通过结合人工智能和流程自动化技术，实现业务智能化升级。</p>
                    <h3>项目背景</h3>
                    <p>客户希望利用AI和RPA技术实现业务智能化，提升决策效率和业务处理能力，但缺乏相关技术经验和实施能力。</p>
                    <h3>解决方案</h3>
                    <ul>
                        <li>部署AI智能分析系统，实现数据智能分析</li>
                        <li>集成RPA自动化流程，处理重复性业务</li>
                        <li>建立AI+RPA协同工作机制</li>
                        <li>提供全面的培训和运维支持</li>
                    </ul>
                    <h3>实施效果</h3>
                    <p>项目实施后，业务处理效率提升了90%，决策准确率提升了75%，实现了业务的全面智能化升级。</p>
                `
            }
        };

        // 加载案例数据
        function loadCaseData() {
            const data = caseData[caseId] || caseData['1'];
            
            document.getElementById('caseTitle').textContent = data.title;
            document.getElementById('casePrice').textContent = data.price;
            document.getElementById('caseType').textContent = data.type;
            document.getElementById('caseDuration').textContent = data.duration;
            document.getElementById('caseSummary').textContent = data.summary;
            document.getElementById('caseCoverImage').style.backgroundImage = `url('${data.coverImage}')`;
            document.getElementById('caseContent').innerHTML = data.content;
        }

        // 联系客户经理
        function handleContactManager() {
            // 这里可以跳转到联系页面或打开联系对话框
            // 示例：打开电话或聊天功能
            if (confirm('是否立即联系客户经理？\n\n我们将为您安排专业的客户经理，为您提供详细的服务咨询。')) {
                // 这里可以添加实际的联系逻辑，比如：
                // - 跳转到聊天页面
                // - 拨打电话
                // - 打开联系表单
                window.location.href = 'tel:400-123-4567'; // 示例：拨打电话
                // 或者
                // window.location.href = 'customer-chat.html?caseId=' + caseId;
            }
        }

        // 页面加载时初始化
        window.addEventListener('DOMContentLoaded', function() {
            loadCaseData();
        });
    </script>
</body>
</html>

